<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>评论管理</el-breadcrumb-item>
      <el-breadcrumb-item>评论列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <el-table :data="commentList" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-row>
              <el-col :span="12" style="border-right: 1px solid #ccc">
                <el-row style="padding: 10px 0;margin: 10px 0;">{{
                  "乘客评论：" + scope.row.passengerReviews
                }}</el-row>
                <el-divider></el-divider>
                <el-row style="margin: 10px 0;">{{
                  "回复评论：" + scope.row.replyReviews
                }}</el-row>
              </el-col>
              <el-col :span="12" style="position: relative">
                <div class="rate-container">
                  <el-row style="margin-bottom: 5px" v-for="(item,i) in scope.row.rate" :key="i">
                      <span v-if="i==0">味道：</span>
                      <span v-else-if="i==1">包装：</span>
                      <span v-else>配送：</span>
                    <el-rate
                      :value="parseFloat(item)"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}"
                    >
                    </el-rate>
                  </el-row>
                </div>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="orderUserName" label="乘客名" width="120">
        </el-table-column>
        <el-table-column label="评论内容">
          <template slot-scope="scope">
            {{ scope.row.passengerReviews | contentFormat}}
          </template>
        </el-table-column>
        <el-table-column label="回复内容">
          <template slot-scope="scope">
            {{ scope.row.replyReviews | contentFormat }}
          </template>
        </el-table-column>
        <el-table-column
          label="下单时间"
          width="180"
        >
        <template slot-scope="scope">{{
            scope.row.orderDate | dateFormat
          }}</template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="回复评论"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="primary"
                icon="el-icon-chat-dot-round"
                size="mini"
                @click="showComment(scope.row.orderID)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除评论"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="deleteComment(scope.row.orderID)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 回复评论对话框 -->
    <el-dialog
  title="回复评论"
  :visible.sync="sendDialogVisible"
  width="50%">
  <el-input
  type="textarea"
  :autosize="{ minRows: 2, maxRows: 4}"
  placeholder="请输入回复内容"
  v-model="replyReviews">
  </el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="sendDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="replyComment">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      commentList: [],
      sendDialogVisible: false,
      replyReviews: '',
      orderID: ''
    }
  },
  created() {
    this.getCommentList()
  },
  methods: {
    async getCommentList() {
      //发请求
      const { data: res } = await this.$http.get('order')
      //有效的订单信息
      let commentList = []
      console.log('res.data: ', res.data);
      res.data.forEach(v => {
        if(v.passengerReviews == null) return
        if(v.replyReviews == null) {
          v.replyReviews = '您暂未对此订单进行评论'
        }
        v.rate = v.rate.split(' ')
        commentList.push(v)
      })
      this.commentList = commentList
      console.log('this.commentList: ', this.commentList);
      
    },
    //删除评论
    deleteComment(id) {
        this.$confirm('此操作将删除该评论, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          //删除评论
          const { data: res } = await this.$http.put('order/' + id, {
          replyReviews: '',
          passengerReviews: ''
        })
        this.sendDialogVisible = false
        this.getCommentList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    //点击回复评论
    showComment(id) {
        this.sendDialogVisible = true
        this.orderID = id
    },
    //提交评论
    async replyComment() {
        if(this.replyReviews == '') return this.$message.error('请先输入内容')
        const { data: res } = await this.$http.put('order/' + this.orderID, {
          replyReviews: this.replyReviews
        })
        this.sendDialogVisible = false
        this.replyReviews = ''
        this.getCommentList()
    }
  },
  filters: {
    contentFormat: function(val) {
      if(val == null) return ''
      if (val.length <= 10) return val
      return val.slice(0, 11) + "..."
    }
  }
}
</script>
<style lang="less" scoped>
.rate-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
</style>
